<!-- 新增案例 -->
<template>
    <div class='bgff h100 pd pt10 case-context pr'>
        <p class="title-label">新增案例</p>
        <div class="context-page-case mt20 ">
            <n-form :model="form" :rules="rules" ref="formRef" label-width="120" :inline="false" size="normal"
                label-placement="left">
                <n-grid :cols="24" :x-gap="20" :y-gap="20">
                    <n-form-item-gi label="标题:" path="title" span="24">
                        <n-input v-model:value="form.title" type="text" placeholder="请输入标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi label="副标题:" span="24">
                        <n-input v-model:value="form.subheading" type="text" placeholder="请输入副标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi label="分类:" span="8" path="classify">
                        <n-select v-model:value="form.classify" size="medium" placeholder="请选择分类"
                            :options="classifyoptions" clearable />

                    </n-form-item-gi>
                    <n-form-item-gi label="网页背景图:" span="24" path="backgroundImage">
                        <div class="logo-context vertical-center ac" @click="photoShowModalfooter = true">
                            <img :src="form.backgroundImage" class="w100 h100 imgjz" v-if="form.backgroundImage" />
                            <span v-else>点击上传网页背景图</span>
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi class="mt40" label="详情:" span="24" >
                        <div class="fwbclass ">
                            <tinymce ref="tinymceref" :ishowVideo="true"></tinymce>
                        </div>
                    </n-form-item-gi>
                </n-grid>
            </n-form>
        </div>
        <n-modal v-model:show="photoShowModalfooter" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>网页背景图</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsan" types="网页背景图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalfooter = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsan"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

        <div class="manipulation-menu cen vertical-center">
            <div class="sdfsdttyer">
                <n-button class="caozjker" type="primary" size="medium" @click="handleValidateClick">保存</n-button>
                <n-button class="caozjker ml20" type="error" size="medium" @click="callBack">返回</n-button>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import photoGallery from "../../../components/util/photoGallery";
import { callBack, dxpost, qurl, dxget } from "../../../util/index"
import tinymce from "../../../components/util/tinymce.vue"
const cz = qurl()
const photoShowModalfooter = ref(false)
const tinymceref = ref()
const classifyoptions = ref([])
const formRef = ref()
const isBj= ref(false)
const form = ref({
    title: "",
    subheading: "",
    classify: "",
    backgroundImage: "",
    particulars:""
})
const rules = {
    title: {
        required: true,
        message: '请输入标题',
        trigger: 'blur'
    },
    classify: {
        required: true,
        message: '请选择分类',
        trigger: 'blur'
    },
    backgroundImage: {
        required: true,
        message: '请上传背景图',
        trigger: 'blur'
    },
}

let jjnmnxesan = "";
const getImgsan = (data) => {
    jjnmnxesan = data;
};
const setImgsan = () => {
    form.value.backgroundImage = jjnmnxesan;
    photoShowModalfooter.value = false;
};

const getcyyxconfig = async () => {
    const { data }: any = await dxget('cyyx/cyyxconfig', { id: 1 })
    classifyoptions.value = JSON.parse(data.data)
}
getcyyxconfig()
const handleValidateClick = (e) => {
    e.preventDefault();
    form.value.particulars = tinymceref.value.getContent().trim()
    let apitype = "post"
    if(isBj.value){
        apitype = 'put'
    }
    formRef.value?.validate(async(errors) => {
        if (!errors) {
           if(!form.value.particulars){
            window.$message.error("请输入详情")
                return
           }
           const {errno}:any = await dxpost('cyyx/cyyxcase',form.value,apitype)
          if(errno==0){
            callBack()
          }
        }
    });
}
const initData = async()=>{
    const {data}:any =  await dxget("cyyx/cyyxcase",{id:cz.id})
    form.value = data
    tinymceref.value.setContent(data.particulars)
}
if(cz.id){
    isBj.value = true
    initData()
}

</script>
<style scoped>
.context-page-case {
    width: 1260px;
}

.fwbclass {
    height: 600px;
}

.logo-context {
    border: 1px dashed #999;
    width: 250px;
    height: 100px;
    text-align: center;
    color: #999;
    cursor: pointer;
    background: #e0e0e0;
}

.logo-context.ab {
    width: 94px;
    height: 94px;
}

.logo-context.ac {
    width: 600px;
    height: 300px;
}

.case-context {
    overflow: auto;
    padding-bottom: 150px;
}

.manipulation-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #fff;
    z-index: 999;
}

.caozjker {
    width: 150px;
}
</style>